<template>
	<view class="body"> 
		<view class="top">
			<image class="topimg" src="https://ft-glb.oss-cn-chengdu.aliyuncs.com/ui/login2.png"></image>
		</view>
		<view class="bottom">
			<view class="account" v-if="biaoji">
				<text class="name">用户名:</text> 
				<view class="username"> 
					<u--input
						placeholder="请输ID|手机号"
						border="bottom"
						v-model="user.name"
						clearable
					></u--input>
				</view>
				<text class="password">密  码:</text> 
				<view class="userpassword">
					<u--input
						type="password"
						placeholder="请输入密码"
						border="bottom"
						v-model="user.password"
						clearable
					></u--input>
				</view>
				<text class="bottom-text" @click="wjmm">忘记密码?</text>
				<text class="bottom-phone" @click="show = true">手机号一键登录注册</text>
				<view class="login">
					<u-button type="primary" text="登 录" @click="loginByUser"></u-button>
				</view>
			</view>
		</view>
		<!-- 忘记密码模态框 -->
		<view class="wjmm">
			<u-modal :show="wjmmflage" :showConfirmButton="false" :closeOnClickOverlay="true" @close="close1" >
				<view class="wjmmmodal">
					<view class="wjmmphone">
						<u-input placeholder="请输入手机号" border="bottom" clearable v-model="wjmmphone" ></u-input>
					</view>
					<view class="wjmmyzm">
							<view class="u-demo-block__content"style="margin-top: 15px;">
										<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
										<!-- #ifndef APP-NVUE -->
										<u-input placeholder="请输入验证码" v-model="wjmmcode">
										<!-- #endif -->
										<!-- #ifdef APP-NVUE -->
										<u--input >
										<!-- #endif --> 
											<template slot="suffix">
												<u-code
													ref="uCode"
													@change="codeChange"
													seconds="60"
													changeText="X秒后重新获取"
												></u-code>
												<u-button
													@tap="wjmmgetCode"
													:text="tips"
													type="success"
													size="mini"
												></u-button>
											</template>
										<!-- #ifndef APP-NVUE -->
										</u-input>
										<!-- #endif -->
										<!-- #ifdef APP-NVUE -->
										</u--input>
										<!-- #endif -->
									</view>
					</view>
					<u--input placeholder="请输入新密码" border="bottom" clearable v-model="wjmmpassword"  ></u--input>
				<view class="wjmm-login">
					<u-button type="primary" text="重  置" @click="czmm"></u-button>
				</view>
				</view>
			</u-modal>
		</view>
		<!-- 手机号登录模态框 -->
		<view class="SMS">
				<u-modal :show="show" :showConfirmButton="false" :closeOnClickOverlay="true" @close="close" >
					<view style="width: 100%;">
						<u--input placeholder="请输入手机号" border="bottom" clearable v-model="phone" ></u--input>
					<view class="yzm">
							<view class="u-demo-block__content"style="margin-top: 15px;">
										<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
										<!-- #ifndef APP-NVUE -->
										<u-input placeholder="请输入验证码" v-model="code">
										<!-- #endif -->
										<!-- #ifdef APP-NVUE -->
										<u--input >
										<!-- #endif --> 
											<template slot="suffix">
												<u-code
													ref="uCode"
													@change="codeChange"
													seconds="60"
													changeText="X秒后重新获取"
												></u-code>
												<u-button
													@tap="getCode"
													:text="tips"
													type="success"
													size="mini"
												></u-button>
											</template>
										<!-- #ifndef APP-NVUE -->
										</u-input>
										<!-- #endif -->
										<!-- #ifdef APP-NVUE -->
										</u--input>
										<!-- #endif -->
									</view>
					</view>
					<view class="model-login">
						<u-button type="primary" text="登 录" @click="yzmlogin"></u-button>
					</view>
					</view>
				</u-modal>
			</view>
	</view> 
</template>
  
<script>
	import {http} from "../../static/service/requestAddress/rtas.js"
	import {socketurl} from "../../static/service/requestAddress/rtas.js"
	const app = getApp()
	export default {
		data(){
			return {
				biaoji:true,
				show: false,
				tips: '',
				active:"",
				phone:"",
				code:"",
				user:{
					name:"",
					password:""
				},
				wjmmflage:false,//忘记密码模态框
				wjmmphone:"",
				wjmmcode:"",
				wjmmpassword:"",
			}
		},
		methods:{
			close(){
				this.show = false
			},
			close1(){
				this.wjmmflage = false
			},
			codeChange(text) {
			        this.tips = text;
			},
	
			//获取验证码方法
			// getCode() {
			// 	let str = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;  //通过正则表达式检查手机号格式
			// 	if(str.test(this.phone)){ 
			// 		var msg = ""
			// 		if (this.$refs.uCode.canGetCode) {
			// 			uni.showLoading({
			// 			title: '正在获取验证码'
			// 			})
			// 			//向后端发送请求
			// 			uni.request({
			// 				url:http+"user/sendcode/"+this.phone,
			// 				method:"GET",
			// 				complete:(res) =>{
			// 					msg = res.data.msg
			// 					if(res.data.code == 20021){
			// 						//定时器
			// 						setTimeout(() => { 
			// 						uni.hideLoading();
			// 						// 这里此提示会被this.start()方法中的提示覆盖
			// 						uni.$u.toast(msg);
			// 						// 通知验证码组件内部开始倒计时
			// 						this.$refs.uCode.start();
			// 						}, 100);
			// 					}else{
			// 						uni.$u.toast(msg)
			// 					}
			// 				}
			// 			})
						
			// 		} else { 
			// 			uni.$u.toast('倒计时结束后再重试');
			// 		}
			// 	}else{
			// 		uni.$u.toast('手机号格式有问题!');
			// 	}
			// },
			//获取验证码方法（模拟，固定验证码为123456）
			getCode() {
			    // let str = /^((13[0 - 9])|(14[0 - 9])|(15[0 - 9])|(17[0 - 9])|(18[0 - 9])|(19[0 - 9]))\d{8}$/;  //通过正则表达式检查手机号格式
				let str = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;  //通过正则表达式检查手机号格式
			        if (str.test(this.phone)) { 
			            if (this.$refs.uCode.canGetCode) {
			                    this.code = '123456'; //设置模拟验证码
			                    uni.showToast({
			                        title: '验证码获取成功',
			                        icon: 'success'
			                        });
			                    } else { 
			                        uni.$u.toast('倒计时结束后再重试');
			                    }
			                } else {
			                    uni.$u.toast('手机号格式有问题!');
			                }
			            },
			// wjmmgetCode() {
			// 	//正则表达式，开头结尾定死，开头加^结尾加&
			// 	let str = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
			// 	//正则表达式.test(被检验的数据) 返回布尔值
			// 	//正则表达式默认是部分匹配
			// 	if(str.test(this.wjmmphone)){ 
			// 		var msg = ""
			// 		if (this.$refs.uCode.canGetCode) {
			// 			uni.showLoading({
			// 			title: '正在获取验证码'
			// 			})
			// 			uni.request({
			// 				url:http+"user/resetcode/"+this.wjmmphone,
			// 				method:"GET",
			// 				complete:(res) =>{
			// 					msg = res.data.msg
			// 					if(res.data.code == 20021){
			// 						//定时器
			// 						setTimeout(() => { 
			// 						uni.hideLoading();
			// 						// 这里此提示会被this.start()方法中的提示覆盖
			// 						uni.$u.toast(msg);
			// 						// 通知验证码组件内部开始倒计时
			// 						//保存用户信息到缓存
			// 						uni.setStorageSync("user",JSON.stringify(user))
			// 						var str = "" + user.id
			// 						var socket = new this.$ws(socketurl,str,3)
			// 						socket.init()
			// 						uni.setStorageSync("websocket",JSON.stringify(socket))
			// 						}, 100);
			// 					}else{
			// 						uni.$u.toast(msg)
			// 					}
			// 				}
			// 			})
						
			// 		} else { 
			// 			uni.$u.toast('倒计时结束后再重试');
			// 		}
			// 	}else{
			// 		uni.$u.toast('手机号格式有问题!');
			// 	}
			// },
			wjmmgetCode() {
			                //正则表达式，开头结尾定死，开头加^结尾加&
			                let str = /^((13[0 - 9])|(14[0 - 9])|(15[0 - 9])|(17[0 - 9])|(18[0 - 9])|(19[0 - 9]))\d{8}$/;
			                //正则表达式.test(被检验的数据) 返回布尔值
			                //正则表达式默认是部分匹配
			                if (str.test(this.wjmmphone)) { 
			                    if (this.$refs.uCode.canGetCode) {
			                        this.wjmmcode = '123456'; //设置模拟验证码
			                        uni.showToast({
			                            title: '验证码获取成功',
			                            icon: 'success'
			                        });
			                    } else { 
			                        uni.$u.toast('倒计时结束后再重试');
			                    }
			                } else {
			                    uni.$u.toast('手机号格式有问题!');
			                }
			            },
			//普通登录方法
			loginByUser(){
				let str = /^\+?[1-9][0-9]*$/
				if(this.user.name.length == 5 || this.user.name.length == 11){
					if(str.test(this.user.name) == false){
						uni.$u.toast("用户名只能是ID或者手机号")
					}else if(this.user.password.length == 0){
						uni.$u.toast("密码不能为空")
					}else{
						var that = this
						uni.request({
							url: http+"user/login",
							method:"POST",
							data:this.user,
							complete:(res) =>{
								let user = {
									id:'',
									name:'',
									img:'',
									state:0,//状态 
									limit:0,//权限等级
									phone:"",
									address:'',
									isfistlogin:null,//是否是首次登录
								}
								if(res.data.code == 20011){
									user.id = res.data.date.id
									user.name =	res.data.date.name
									user.img = res.data.date.img 
									user.state = res.data.date.state
									user.limit = res.data.date.limit  
									user.address = res.data.date.address
									user.sex = res.data.date.sex
									user.phone = res.data.date.phone
									user.isfistlogin = true
									//获取用户好友列表
									var promise = new Promise(function(resolve,reject){
										uni.request({
											url:http+"user/getuserlist/"+user.id,
											method:"GET",
											complete:(res1)=> {
												if(res1.data.code == 20021){
													//遍历好友列表,添加是否是陌生人属性
													if(res1.data.date.length > 0){
														for(var i = 0;i<res1.data.date.length;i++){
															res1.data.date[i].isStranger = false
														}
														uni.setStorageSync("userfriendlist",JSON.stringify(res1.data.date))
													}
													resolve()
												}else{
													uni.$u.toast("获取用户列表失败，请下拉刷新重试")
												}
											}
										})
									})
									promise.then(res2=>{
										//保存用户信息到缓存
										uni.setStorageSync("user",JSON.stringify(user))
										app.globalData.websocket.init(user.id)
										setTimeout(()=>{
											uni.switchTab({
												url:"/pages/massage/user",
											})
										}, 1000);
										uni.$u.toast("登录成功!")
									})
								}else{ 
									uni.$u.toast("登录失败!")
								}
							}
						})
					}
				}else{
					uni.$u.toast("ID或者手机号有问题")
				}	
			},
		// 	//验证码登录点击方法
		// 	yzmlogin(){ 
		// 		uni.request({
		// 			url:http+"user/"+this.phone+"/"+this.code,
		// 			method:"POST",
		// 			complete:(res) =>{
		// 				let user = {
		// 					id:'',
		// 					name:'',
		// 					img:'',
		// 					state:0,//状态 
		// 					limit:0,//权限等级
		// 					phone:"",
		// 					address:'',
		// 					isfistlogin:null,//是否是首次登录
		// 				}
		// 				if(res.data.code == 20011){
		// 					user.id = res.data.date.id
		// 					user.name =	res.data.date.name
		// 					user.img = res.data.date.img 
		// 					user.state = res.data.date.state
		// 					user.limit = res.data.date.limit  
		// 					user.address = res.data.date.address
		// 					user.sex = res.data.date.sex
		// 					user.phone = res.data.date.phone
		// 					user.isfistlogin = true
		// 					//获取用户好友列表
		// 					var promise = new Promise(function(resolve,reject){
		// 						uni.request({
		// 							url:http+"user/getuserlist/"+user.id,
		// 							method:"GET",
		// 							complete:(res1)=> {
		// 								if(res1.data.code == 20021){
		// 									//遍历好友列表,添加是否是陌生人属性
		// 									for(var i = 0;i<res1.data.date.length;i++){
		// 										res1.data.date[i].isStranger = false
		// 									}
		// 									uni.setStorageSync("userfriendlist",JSON.stringify(res1.data.date))
		// 									resolve()
		// 								}else{
		// 									uni.$u.toast("获取用户列表失败，请下拉刷新重试")
		// 								}
		// 							}
		// 						})
		// 					})
		// 					promise.then(res2=>{
		// 						//保存用户信息到缓存
		// 						uni.setStorageSync("user",JSON.stringify(user))
		// 						app.globalData.websocket.init(user.id)
		// 						setTimeout(()=>{
		// 							uni.switchTab({
		// 								url:"/pages/massage/user",
		// 							})
		// 						}, 1000);
		// 						uni.$u.toast("登录成功!")
		// 					})
		// 				}else{ 
		// 					uni.$u.toast("登录失败!")
		// 				}
		// 			}
		// 		})
		// 	},
		// //忘记密码
		// wjmm(){
		// 	console.log("点击了忘记密码")
		// 	this.wjmmflage = true
		// },
		// czmm(){
		// 	console.log("重置密码"+this.wjmmphone+"|"+this.wjmmcode+"|"+this.wjmmpassword)
		// 	uni.request({
		// 		url:http+"user/resetpossword/"+this.wjmmphone+"/"+this.wjmmcode+"/"+this.wjmmpassword,
		// 		method:"PUT",
		// 		complete:(res)=>{
		// 			if(res.data.code == 20041){
		// 				uni.$u.toast("重置密码成功，快去登录吧!")
		// 				setTimeout(()=>{
		// 					uni.switchTab({
		// 						url:"/pages/massage/user",
		// 					})
		// 				}, 1000);
		// 			}else{
		// 				uni.$u.toast("重置密码失败!")
		// 			}
		// 		}
		// 	})
		// },
		 yzmlogin() { 
		                if (this.code === '123456') { //使用模拟验证码进行验证
		                    uni.request({
		                        url: http + "user/" + this.phone + "/" + this.code,
		                        method: "POST",
		                        complete: (res) => {
		                            let user = {
		                                id: '',
		                                name: '',
		                                img: '',
		                                state: 0,//状态 
		                                limit: 0,//权限等级
		                                phone: "",
		                                address: '',
		                                isfistlogin: null,//是否是首次登录
		                            }
		                            if (res.data.code == 20011) {
		                                user.id = res.data.date.id
		                                user.name = res.data.date.name
		                                user.img = res.data.date.img 
		                                user.state = res.data.date.state
		                                user.limit = res.data.date.limit  
		                                user.address = res.data.date.address
		                                user.sex = res.data.date.sex
		                                user.phone = res.data.date.phone
		                                user.isfistlogin = true
		                                //获取用户好友列表
		                                var promise = new Promise(function(resolve, reject) {
		                                    uni.request({
		                                        url: http + "user/getuserlist/" + user.id,
		                                        method: "GET",
		                                        complete: (res1) => {
		                                            if (res1.data.code == 20021) {
		                                                //遍历好友列表,添加是否是陌生人属性
		                                                for (var i = 0; i < res1.data.date.length; i++) {
		                                                    res1.data.date[i].isStranger = false
		                                                }
		                                                uni.setStorageSync("userfriendlist", JSON.stringify(res1.data.date))
		                                                resolve()
		                                            } else {
		                                                uni.$u.toast("获取用户列表失败，请下拉刷新重试")
		                                            }
		                                        }
		                                    })
		                                })
		                                promise.then(res2 => {
		                                    //保存用户信息到缓存
		                                    uni.setStorageSync("user", JSON.stringify(user))
		                                    app.globalData.websocket.init(user.id)
		                                    setTimeout(() => {
		                                        uni.switchTab({
		                                            url: "/pages/massage/user",
		                                        })
		                                    }, 1000);
		                                    uni.$u.toast("登录成功!")
		                                })
		                            } else { 
		                                uni.$u.toast("登录失败!")
		                            }
		                        }
		                    })
		                } else {
		                    uni.$u.toast("验证码错误!");
		                }
		            },
		            //忘记密码
		            wjmm() {
		                console.log("点击了忘记密码")
		                this.wjmmflage = true
		            },
		            czmm() {
		                console.log("重置密码" + this.wjmmphone + "|" + this.wjmmcode + "|" + this.wjmmpassword)
		                if (this.wjmmcode === '123456') { //使用模拟验证码进行验证
		                    uni.request({
		                        url: http + "user/resetpossword/" + this.wjmmphone + "/" + this.wjmmcode + "/" + this.wjmmpassword,
		                        method: "PUT",
		                        complete: (res) => {
		                            if (res.data.code == 20041) {
		                                uni.$u.toast("重置密码成功，快去登录吧!")
		                                setTimeout(() => {
		                                    uni.switchTab({
		                                        url: "/pages/massage/user",
		                                    })
		                                }, 1000);
		                            } else {
		                                uni.$u.toast("重置密码失败!")
		                            }
		                        }
		                    })
		                } else {
		                    uni.$u.toast("验证码错误!");
		                }
		            },
		}
	}
</script>

<style>
	@import url("@/static/css/login.css");
</style>